<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>基础属性 | 个人笔记</title>
    <meta name="description" content="个人笔记">
    <link rel="stylesheet" href="/vite-vue-blog/assets/style.8f176e54.css">
    <link rel="modulepreload" href="/vite-vue-blog/assets/app.864f9b59.js">
    <link rel="modulepreload" href="/vite-vue-blog/assets/notes_2.basic_2.css_1.基础.md.7ace2c5c.lean.js">
    <link rel="prefetch" href="/vite-vue-blog/assets/chunks/VPAlgoliaSearchBox.1d33ff4e.js">
    <link rel="icon" href="/vite-vue-blog/logo.svg">
  <link rel="preload" href="/assets/inter-latin.7b37fe23.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <script>(()=>{const e=localStorage.getItem("vue-theme-appearance");(!e||e==="auto"?window.matchMedia("(prefers-color-scheme: dark)").matches:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="VPApp" data-v-73d720b3><!--[--><span tabindex="-1" data-v-9a0c1eda></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-9a0c1eda> Skip to content </a><!--]--><!----><!--[--><!--]--><header class="VPNav nav-bar" data-v-73d720b3 data-v-665b4326><div class="VPNavBar" data-v-665b4326 data-v-22c1e5cc><div class="container" data-v-22c1e5cc><a class="VPNavBarTitle" href="/vite-vue-blog/" data-v-22c1e5cc data-v-734a10ac><h1 class="text" data-v-734a10ac>个人笔记</h1></a><div class="content" data-v-22c1e5cc><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-22c1e5cc data-v-03d04f32><span id="main-nav-aria-label" class="visually-hidden" data-v-03d04f32>Main Navigation</span><!--[--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-03d04f32 data-v-6671b864><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false"><span class="vt-flyout-button-text">javaScript <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-text-icon"><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="vt-flyout-menu"><div class="vt-menu"><div class="vt-menu-items"><!--[--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/1.javaScript/typescript/1.%E4%BB%8B%E7%BB%8D%E4%B8%8E%E5%AE%89%E8%A3%85.html"><!--[-->typescript<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/1.%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95.html"><!--[-->基础<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/1.javaScript/%E5%B7%A5%E5%85%B7%E5%87%BD%E6%95%B0/10.%E5%B7%A5%E5%85%B7%E5%87%BD%E6%95%B0.html"><!--[-->工具函数<!--]--><!----></a><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-03d04f32 data-v-6671b864><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false"><span class="vt-flyout-button-text">basic <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-text-icon"><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="vt-flyout-menu"><div class="vt-menu"><div class="vt-menu-items"><!--[--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/2.basic/1.html/1.%E5%9F%BA%E7%A1%80.html"><!--[-->html<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/2.basic/2.css/1.%E5%9F%BA%E7%A1%80.html"><!--[-->css<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/2.basic/5.node/1.%E8%B5%B7%E6%AD%A5.html"><!--[-->node<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/2.basic/6.http/2.http.html"><!--[-->http<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/2.basic/7.git/github.html"><!--[-->git<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/2.basic/8.java/1.%E8%B5%B7%E6%AD%A5.html"><!--[-->java<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/2.basic/9.%E7%AE%97%E6%B3%95/1.%E5%9F%BA%E7%A1%80.html"><!--[-->算法<!--]--><!----></a><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-03d04f32 data-v-6671b864><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false"><span class="vt-flyout-button-text">framework <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-text-icon"><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="vt-flyout-menu"><div class="vt-menu"><div class="vt-menu-items"><!--[--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/3.framework/10.react/1.%E9%A1%B9%E7%9B%AE%E5%88%9B%E5%BB%BA%E4%B8%8E%E9%85%8D%E7%BD%AE.html"><!--[-->react<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/3.framework/3.express/1.%E8%B5%B7%E6%AD%A5.html"><!--[-->express<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/3.framework/3.vue/12.vitepress.html"><!--[-->vue<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/3.framework/4.uniapp/1.%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE.html"><!--[-->uniapp<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/3.framework/5.electron/1.%E8%B5%B7%E6%AD%A5.html"><!--[-->electron<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/3.framework/6.%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE.html"><!--[-->微信小程序<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/3.framework/7.%E4%B9%BE%E5%9D%A4/1.%E5%89%8D%E7%BD%AE%E7%9F%A5%E8%AF%86.html"><!--[-->乾坤<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/3.framework/koa/redis.html"><!--[-->koa<!--]--><!----></a><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-03d04f32 data-v-6671b864><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false"><span class="vt-flyout-button-text">library <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-text-icon"><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="vt-flyout-menu"><div class="vt-menu"><div class="vt-menu-items"><!--[--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/4.library/Autoprefixer/1.%E5%9F%BA%E7%A1%80.html"><!--[-->Autoprefixer<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/4.library/eharts/1.vue%E4%B8%AD%E4%BD%BF%E7%94%A8.html"><!--[-->eharts<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/4.library/logic-flow/1.%E8%B5%B7%E6%AD%A5.html"><!--[-->logic-flow<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/4.library/Monaco-Editor/Monaco-Editor.html"><!--[-->Monaco-Editor<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/4.library/node%E5%8C%85/cheerio.html"><!--[-->node包<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/4.library/xlsx/1.%E6%96%87%E6%A1%A3%E7%BF%BB%E8%AF%91.html"><!--[-->xlsx<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/4.library/%E5%BE%85%E6%95%B4%E7%90%86/axios.html"><!--[-->待整理<!--]--><!----></a><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-03d04f32 data-v-6671b864><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false"><span class="vt-flyout-button-text">build <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-text-icon"><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="vt-flyout-menu"><div class="vt-menu"><div class="vt-menu-items"><!--[--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/5.build/1.webpack/1.%E8%B5%B7%E6%AD%A5.html"><!--[-->webpack<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/5.build/2.rollup/1.%E4%BB%8B%E7%BB%8D.html"><!--[-->rollup<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/5.build/3.babel/3.babel.html"><!--[-->babel<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/5.build/4.server/4.%E4%B8%8A%E7%BA%BF.html"><!--[-->server<!--]--><!----></a><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-03d04f32 data-v-6671b864><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false"><span class="vt-flyout-button-text">all <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-text-icon"><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="vt-flyout-menu"><div class="vt-menu"><div class="vt-menu-items"><!--[--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/6.all/3.just-start/2.mongodb.html"><!--[-->just-start<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/6.all/4.solve-problems/postmon.html"><!--[-->solve-problems<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/6.all/4.vscode/1.vscode%E4%BD%BF%E7%94%A8.html"><!--[-->vscode<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/6.all/English/%E5%AD%A6%E4%B9%A0%E5%AD%A6%E4%B9%A0.html"><!--[-->English<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/6.all/Snabbdom/1.%E6%BA%90%E7%A0%81%E8%A7%A3%E8%AF%BB.html"><!--[-->Snabbdom<!--]--><!----></a><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><div class="VPNavBarAppearance appearance" data-v-22c1e5cc data-v-4a42e18e><button class="vt-switch vt-switch-appearance" type="button" role="switch" aria-label="toggle dark mode" data-v-4a42e18e><span class="vt-switch-check"><span class="vt-switch-icon"><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-switch-appearance-sun"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-switch-appearance-moon"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="vt-social-links VPNavBarSocialLinks social-links" data-v-22c1e5cc data-v-16262ec2><!--[--><a class="vt-social-link is-small" href="https://github.com/zqy233/vite-vue-blog" title="github" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-social-link-icon"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg><span class="visually-hidden">github</span></a><!--]--></div><div class="vt-flyout VPNavBarExtra extra" data-v-22c1e5cc data-v-0e7e8326><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-icon"><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="vt-flyout-menu"><div class="vt-menu"><!----><!--[--><!--[--><div class="vt-menu-group" data-v-0e7e8326><div class="vt-menu-item item" data-v-0e7e8326><p class="vt-menu-label" data-v-0e7e8326>明暗</p><div class="vt-menu-action action" data-v-0e7e8326><button class="vt-switch vt-switch-appearance" type="button" role="switch" aria-label="toggle dark mode" data-v-0e7e8326><span class="vt-switch-check"><span class="vt-switch-icon"><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-switch-appearance-sun"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-switch-appearance-moon"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="vt-menu-group" data-v-0e7e8326><div class="vt-menu-item item" data-v-0e7e8326><div class="vt-social-links social-links" data-v-0e7e8326><!--[--><a class="vt-social-link is-small" href="https://github.com/zqy233/vite-vue-blog" title="github" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-social-link-icon"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg><span class="visually-hidden">github</span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><button type="button" class="vt-hamburger VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-22c1e5cc data-v-60965b98><span class="vt-hamburger-container"><span class="vt-hamburger-top"></span><span class="vt-hamburger-middle"></span><span class="vt-hamburger-bottom"></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-73d720b3 data-v-acbefcb0><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-acbefcb0><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-acbefcb0><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-acbefcb0>目录</span></button><a class="top-link" href="#" data-v-acbefcb0>回到顶部</a></div><aside class="VPSidebar" data-v-73d720b3 data-v-137f95ea><nav id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-137f95ea><!--[--><!--]--><span id="sidebar-aria-label" class="visually-hidden" data-v-137f95ea>Sidebar Navigation </span><!--[--><div class="group" data-v-137f95ea><section class="VPSidebarGroup" data-v-137f95ea data-v-0ce3abb6><div class="title" data-v-0ce3abb6><h2 class="title-text" data-v-0ce3abb6>html</h2></div><!--[--><a class="link" href="/vite-vue-blog/notes/2.basic/1.html/1.%E5%9F%BA%E7%A1%80.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>基础</p></a><!--]--></section></div><div class="group" data-v-137f95ea><section class="VPSidebarGroup" data-v-137f95ea data-v-0ce3abb6><div class="title" data-v-0ce3abb6><h2 class="active title-text" data-v-0ce3abb6>css</h2></div><!--[--><a class="link active" href="/vite-vue-blog/notes/2.basic/2.css/1.%E5%9F%BA%E7%A1%80.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>基础</p></a><a class="link" href="/vite-vue-blog/notes/2.basic/2.css/2.flex.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>flex</p></a><a class="link" href="/vite-vue-blog/notes/2.basic/2.css/3.less.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>less</p></a><a class="link" href="/vite-vue-blog/notes/2.basic/2.css/4.scss.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>scss</p></a><a class="link" href="/vite-vue-blog/notes/2.basic/2.css/5.%E5%93%8D%E5%BA%94%E5%BC%8F.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>响应式</p></a><a class="link" href="/vite-vue-blog/notes/2.basic/2.css/6.%E4%B8%BB%E9%A2%98%E5%88%87%E6%8D%A2.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>主题切换</p></a><a class="link" href="/vite-vue-blog/notes/2.basic/2.css/7.%E5%8A%A8%E7%94%BB.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>动画</p></a><a class="link" href="/vite-vue-blog/notes/2.basic/2.css/8.grid.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>grid</p></a><!--]--></section></div><div class="group" data-v-137f95ea><section class="VPSidebarGroup" data-v-137f95ea data-v-0ce3abb6><div class="title" data-v-0ce3abb6><h2 class="title-text" data-v-0ce3abb6>node</h2></div><!--[--><a class="link" href="/vite-vue-blog/notes/2.basic/5.node/1.%E8%B5%B7%E6%AD%A5.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>起步</p></a><a class="link" href="/vite-vue-blog/notes/2.basic/5.node/4.%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F%E8%AE%BE%E7%BD%AE.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>环境变量设置</p></a><a class="link" href="/vite-vue-blog/notes/2.basic/5.node/npm.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>npm</p></a><a class="link" href="/vite-vue-blog/notes/2.basic/5.node/nvm.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>nvm</p></a><a class="link" href="/vite-vue-blog/notes/2.basic/5.node/package.json.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>packagejson</p></a><a class="link" href="/vite-vue-blog/notes/2.basic/5.node/pnpm.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>pnpm</p></a><a class="link" href="/vite-vue-blog/notes/2.basic/5.node/yarn.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>yarn</p></a><a class="link" href="/vite-vue-blog/notes/2.basic/5.node/%E8%84%9A%E6%9C%AC%E5%BC%80%E5%8F%91.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>脚本开发</p></a><!--]--></section></div><div class="group" data-v-137f95ea><section class="VPSidebarGroup" data-v-137f95ea data-v-0ce3abb6><div class="title" data-v-0ce3abb6><h2 class="title-text" data-v-0ce3abb6>http</h2></div><!--[--><a class="link" href="/vite-vue-blog/notes/2.basic/6.http/2.http.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>http</p></a><a class="link" href="/vite-vue-blog/notes/2.basic/6.http/Untitled.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>Untitled</p></a><!--]--></section></div><div class="group" data-v-137f95ea><section class="VPSidebarGroup" data-v-137f95ea data-v-0ce3abb6><div class="title" data-v-0ce3abb6><h2 class="title-text" data-v-0ce3abb6>git</h2></div><!--[--><a class="link" href="/vite-vue-blog/notes/2.basic/7.git/github.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>github</p></a><a class="link" href="/vite-vue-blog/notes/2.basic/7.git/vim%E7%BC%96%E8%BE%91%E5%99%A8.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>vim编辑器</p></a><a class="link" href="/vite-vue-blog/notes/2.basic/7.git/%E5%88%86%E6%94%AF%E6%93%8D%E4%BD%9C.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>分支操作</p></a><a class="link" href="/vite-vue-blog/notes/2.basic/7.git/%E5%9F%BA%E7%A1%80.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>基础</p></a><a class="link" href="/vite-vue-blog/notes/2.basic/7.git/%E5%AD%90%E6%A8%A1%E5%9D%97.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>子模块</p></a><a class="link" href="/vite-vue-blog/notes/2.basic/7.git/%E6%8B%89%E5%8F%96%E4%BB%A3%E7%A0%81.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>拉取代码</p></a><a class="link" href="/vite-vue-blog/notes/2.basic/7.git/%E6%8F%90%E4%BA%A4%E4%BB%A3%E7%A0%81.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>提交代码</p></a><a class="link" href="/vite-vue-blog/notes/2.basic/7.git/%E9%97%AE%E9%A2%98%E6%95%B4%E7%90%86.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>问题整理</p></a><!--]--></section></div><div class="group" data-v-137f95ea><section class="VPSidebarGroup" data-v-137f95ea data-v-0ce3abb6><div class="title" data-v-0ce3abb6><h2 class="title-text" data-v-0ce3abb6>java</h2></div><!--[--><a class="link" href="/vite-vue-blog/notes/2.basic/8.java/1.%E8%B5%B7%E6%AD%A5.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>起步</p></a><a class="link" href="/vite-vue-blog/notes/2.basic/8.java/3.%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>基础语法</p></a><a class="link" href="/vite-vue-blog/notes/2.basic/8.java/4.javaweb.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>javaweb</p></a><a class="link" href="/vite-vue-blog/notes/2.basic/8.java/5.mysql.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>mysql</p></a><a class="link" href="/vite-vue-blog/notes/2.basic/8.java/6.%E6%9C%8D%E5%8A%A1%E5%99%A8.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>服务器</p></a><!--]--></section></div><div class="group" data-v-137f95ea><section class="VPSidebarGroup" data-v-137f95ea data-v-0ce3abb6><div class="title" data-v-0ce3abb6><h2 class="title-text" data-v-0ce3abb6>算法</h2></div><!--[--><a class="link" href="/vite-vue-blog/notes/2.basic/9.%E7%AE%97%E6%B3%95/1.%E5%9F%BA%E7%A1%80.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>基础</p></a><a class="link" href="/vite-vue-blog/notes/2.basic/9.%E7%AE%97%E6%B3%95/5.leecode.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>leecode</p></a><!--]--></section></div><!--]--><!--[--><!--]--></nav></aside><div id="VPContent" class="VPContent has-sidebar" data-v-73d720b3 data-v-f1570ab6><div class="VPContentDoc has-aside has-sidebar" data-v-f1570ab6 data-v-6971fa12><div class="container" data-v-6971fa12><div class="aside" data-v-6971fa12><div class="aside-container" data-v-6971fa12><!--[--><!--]--><div class="VPContentDocOutline" data-v-6971fa12 data-v-6706ac52><div class="outline-marker" data-v-6706ac52></div><div class="outline-title" data-v-6706ac52>索引</div><nav aria-labelledby="doc-outline-aria-label" data-v-6706ac52><span id="doc-outline-aria-label" class="visually-hidden" data-v-6706ac52>Table of Contents for current page</span><ul class="root" data-v-6706ac52><!--[--><li style="" data-v-6706ac52><a class="outline-link" href="#animation-transition" data-v-6706ac52>animation/transition</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#文字" data-v-6706ac52>文字</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#中文不换行" data-v-6706ac52>中文不换行</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#滚动" data-v-6706ac52>滚动</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#鼠标选中文本颜色" data-v-6706ac52>鼠标选中文本颜色</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#定位垂直居中" data-v-6706ac52>定位垂直居中</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#background" data-v-6706ac52>background</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#border" data-v-6706ac52>border</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#css选择器" data-v-6706ac52>css选择器</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#calc" data-v-6706ac52>calc</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#border-box" data-v-6706ac52>border-box</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#vw，vh和" data-v-6706ac52>vw，vh和%</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#root" data-v-6706ac52>:root</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#text-decoration" data-v-6706ac52>text-decoration</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#好看的box-shadow" data-v-6706ac52>好看的box-shadow</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#浏览器兼容前缀" data-v-6706ac52>浏览器兼容前缀</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#箭头绘制" data-v-6706ac52>箭头绘制</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#pointer-events-none" data-v-6706ac52>pointer-events: none</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#margin-padding" data-v-6706ac52>margin/padding</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#table" data-v-6706ac52>table</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#input" data-v-6706ac52>input</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#transform" data-v-6706ac52>transform</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#表格" data-v-6706ac52>表格</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#回流（reflow）与重绘（repaints）" data-v-6706ac52>回流（reflow）与重绘（repaints）</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#脱离文档流" data-v-6706ac52>脱离文档流</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#css高度随宽度变化" data-v-6706ac52>css高度随宽度变化</a><!----></li><!--]--></ul></nav></div><!--[--><!--]--><!----><!--[--><!--]--></div></div><div class="content" data-v-6971fa12><!--[--><!--]--><main data-v-6971fa12><div style="position:relative;" class="vt-doc notes" data-v-6971fa12><div><h1 id="基础属性" tabindex="-1">基础属性 <a class="header-anchor" href="#基础属性" aria-hidden="true">#</a></h1><h2 id="animation-transition" tabindex="-1">animation/transition <a class="header-anchor" href="#animation-transition" aria-hidden="true">#</a></h2><h3 id="animation" tabindex="-1">animation <a class="header-anchor" href="#animation" aria-hidden="true">#</a></h3><p>是一个简写属性，用于设置六个动画属性：</p><table><thead><tr><th>属性名</th><th>介绍</th></tr></thead><tbody><tr><td>animation-name</td><td>规定需要绑定到选择器的 keyframe 名称</td></tr><tr><td>animation-duration</td><td>规定完成动画所花费的时间，以秒或毫秒计</td></tr><tr><td>animation-timing-function</td><td>规定动画的速度曲线</td></tr><tr><td>animation-delay</td><td>规定在动画开始之前的延迟</td></tr><tr><td>animation-iteration-count</td><td>规定动画应该播放的次数</td></tr><tr><td>animation-direction</td><td>规定是否应该轮流反向播放动画</td></tr></tbody></table><p>示例：</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">animation: showText 2s </span><span style="color:#FFCB6B;">ease-in-out</span><span style="color:#A6ACCD;"> ifinite 5s;</span></span>
<span class="line"></span></code></pre></div><p>通过 @keyframes 规则，能够创建动画，原理是，将一套 CSS 样式逐渐变化为另一套样式</p><p>在动画过程中，能够多次改变这套 CSS 样式，如下，定义动画的开始时间和动画结束时间的css</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;font-style:italic;">@keyframes</span><span style="color:#A6ACCD;"> showText </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#FFCB6B;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">background-position-x</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0%</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#FFCB6B;">to</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">background-position-x</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100%</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;font-style:italic;">@keyframes</span><span style="color:#A6ACCD;"> hideText </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#FFCB6B;">0%</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">background-position-x</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100%</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#FFCB6B;">100%</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">background-position-x</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0%</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h3 id="transition" tabindex="-1">transition <a class="header-anchor" href="#transition" aria-hidden="true">#</a></h3><p>使用多个动画效果，使用逗号间隔即可</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">transition: transform 0</span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">3s</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">ease-out</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> width 2s </span><span style="color:#FFCB6B;">ease-in</span><span style="color:#A6ACCD;">;</span></span>
<span class="line"></span></code></pre></div><p>切换class可以触发transition动画</p><div class="language-js"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> white </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">.white</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">white</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">onclick</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">white</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">classList</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toggle</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">small</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h3 id="transition和animation的区别" tabindex="-1">transition和animation的区别 <a class="header-anchor" href="#transition和animation的区别" aria-hidden="true">#</a></h3><p>1、transition 需要hover、class变化等触发，这就需要点击事件、鼠标移入事件等；而 animation 可以配合 @keyframe 可以不触发事件就触发这个动画</p><p>2、transition 触发一次播放一次；而 animation 则是可以设置很多的属性，比如循环次数，动画结束的状态等等</p><p>3、transition关注的是样式属性的变化，属性值和时间的关系是一个三次贝塞尔曲线；而animation作用于元素本身而不是样式属性，可以使用关键帧的概念，可以实现更自由的动画效果</p><p>4、在性能方面：浏览器有一个主线程和排版线程；主线程一般是对 js 运行的、页面布局、生成位图等等，然后把生成好的位图传递给排版线程，而排版线程会通过 GPU 将位图绘制到页面上，也会向主线程请求位图等等；我们在用使用 aniamtion 的时候这样就可以改变很多属性，像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起，页面的回流和重绘，对性能影响就比较大，但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图，当然也就不会引起页面的重排了</p><h2 id="文字" tabindex="-1">文字 <a class="header-anchor" href="#文字" aria-hidden="true">#</a></h2><h3 id="右端文字参差不齐" tabindex="-1">右端文字参差不齐 <a class="header-anchor" href="#右端文字参差不齐" aria-hidden="true">#</a></h3><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#FFCB6B;">text-align</span><span style="color:#A6ACCD;">: justify;</span></span>
<span class="line"></span></code></pre></div><h3 id="不换行" tabindex="-1">不换行 <a class="header-anchor" href="#不换行" aria-hidden="true">#</a></h3><p>强制不换行</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#FFCB6B;">white-space</span><span style="color:#A6ACCD;">:nowrap;</span></span>
<span class="line"></span></code></pre></div><h2 id="中文不换行" tabindex="-1">中文不换行 <a class="header-anchor" href="#中文不换行" aria-hidden="true">#</a></h2><p>只对中文起作用，强制换行</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#FFCB6B;">white-space</span><span style="color:#A6ACCD;">:</span><span style="color:#FFCB6B;">pre-wrap</span><span style="color:#A6ACCD;">;</span></span>
<span class="line"></span></code></pre></div><h3 id="英文数字不换行" tabindex="-1">英文数字不换行 <a class="header-anchor" href="#英文数字不换行" aria-hidden="true">#</a></h3><p>只对英文起作用，以字母作为换行依据</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#FFCB6B;">word-break</span><span style="color:#A6ACCD;">:</span><span style="color:#FFCB6B;">break-all</span><span style="color:#A6ACCD;">; </span></span>
<span class="line"></span></code></pre></div><p>只对英文起作用，以单词作为换行依据</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#FFCB6B;">word-wrap</span><span style="color:#A6ACCD;">:</span><span style="color:#FFCB6B;">break-word</span><span style="color:#A6ACCD;">;</span></span>
<span class="line"></span></code></pre></div><h3 id="文本过长变成省略号" tabindex="-1">文本过长变成省略号 <a class="header-anchor" href="#文本过长变成省略号" aria-hidden="true">#</a></h3><p>需要设置不换行，这样超出部分隐藏且以省略号形式出现</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">  width:100px;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#FFCB6B;">text-overflow</span><span style="color:#A6ACCD;">: ellipsis;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#FFCB6B;">white-space</span><span style="color:#A6ACCD;">: nowrap;</span></span>
<span class="line"><span style="color:#A6ACCD;">  overflow: hidden;</span></span>
<span class="line"></span></code></pre></div><h3 id="英文文本大写" tabindex="-1">英文文本大写 <a class="header-anchor" href="#英文文本大写" aria-hidden="true">#</a></h3><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#FFCB6B;">text-transform</span><span style="color:#A6ACCD;">: capitalize; </span></span>
<span class="line"></span></code></pre></div><h3 id="icon和文字不对齐" tabindex="-1">icon和文字不对齐 <a class="header-anchor" href="#icon和文字不对齐" aria-hidden="true">#</a></h3><p>可以使用vertical-align 指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐高度</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#FFCB6B;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">   </span><span style="color:#B2CCD6;">font-size</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">25px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">   </span><span style="color:#B2CCD6;">vertical-align</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">-3px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h3 id="文字间距" tabindex="-1">文字间距 <a class="header-anchor" href="#文字间距" aria-hidden="true">#</a></h3><p>需要搭配padding-left一起使用，不然文字会偏左</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#FFCB6B;">letter-spacing</span><span style="color:#A6ACCD;">: 20px;</span></span>
<span class="line"><span style="color:#FFCB6B;">padding-left</span><span style="color:#A6ACCD;">:10px;</span></span>
<span class="line"></span></code></pre></div><h2 id="滚动" tabindex="-1">滚动 <a class="header-anchor" href="#滚动" aria-hidden="true">#</a></h2><h3 id="滚动条样式" tabindex="-1">滚动条样式 <a class="header-anchor" href="#滚动条样式" aria-hidden="true">#</a></h3><p>谷歌浏览器</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">   </span><span style="color:#676E95;font-style:italic;">/*滚动条整体部分,必须要设置*/</span></span>
<span class="line"><span style="color:#A6ACCD;">   </span><span style="color:#89DDFF;">::</span><span style="color:#C792EA;">-webkit-scrollbar</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      heigth</span><span style="color:#89DDFF;">:</span><span style="color:#F78C6C;">10</span><span style="color:#A6ACCD;">p</span></span>
<span class="line"><span style="color:#A6ACCD;">      background-color: </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">0099ff</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">/*滚动条的轨道*/</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">::</span><span style="color:#C792EA;">-webkit-scrollbar-track</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">background-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">fff</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">/*滚动条的滑块按钮*/</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">::</span><span style="color:#C792EA;">-webkit-scrollbar-thumb</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">border-radius</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">background-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">0099ff</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#676E95;font-style:italic;">/* box-shadow: inset 0 0 5px #0099ff; */</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#676E95;font-style:italic;">/* background: linear-gradient(#00DBDE 0%, #FC00FF 100%); */</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">/*滚动条的上下两端的按钮*/</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">::</span><span style="color:#C792EA;">-webkit-scrollbar-button</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">background-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">000</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><p>ie浏览器</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#676E95;font-style:italic;">/*滚动条箭头的颜色*/</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#FFCB6B;">scrollbar-arrow-color</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">49b1f5;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#676E95;font-style:italic;">/*滚动条滑块按钮的颜色*/</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#FFCB6B;">scrollbar-face-color</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">49b1f5;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#676E95;font-style:italic;">/*滚动条整体颜色*/</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#FFCB6B;">scrollbar-highlight-color</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">49b1f5;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#676E95;font-style:italic;">/*滚动条阴影*/</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#FFCB6B;">scrollbar-shadow-color</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">49b1f5;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#676E95;font-style:italic;">/*滚动条轨道颜色*/</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#FFCB6B;">scrollbar-track-color</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">fff;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#676E95;font-style:italic;">/*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#FFCB6B;">scrollbar-3dlight-color</span><span style="color:#A6ACCD;">: pink;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#676E95;font-style:italic;">/*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#FFCB6B;">scrollbar-darkshadow-color</span><span style="color:#A6ACCD;">: pink;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#676E95;font-style:italic;">/*滚动条基准颜色*/</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#FFCB6B;">scrollbar-base-color</span><span style="color:#A6ACCD;">: pink;</span></span>
<span class="line"></span></code></pre></div><h3 id="平滑滚动" tabindex="-1">平滑滚动 <a class="header-anchor" href="#平滑滚动" aria-hidden="true">#</a></h3><p>a标签跳转时平滑滚动</p><div class="language-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">a</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">href</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">#section2</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">点击我会平滑滚动到下面的第二章</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">a</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#FFCB6B;">html</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">scroll-behavior</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> smooth</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h3 id="滚动条隐藏" tabindex="-1">滚动条隐藏 <a class="header-anchor" href="#滚动条隐藏" aria-hidden="true">#</a></h3><p>方法一，设置父盒子 overflow:hidden，子盒子 overflow:auto，设置子盒子的宽度比父盒子大，从而父盒子会遮住子盒子的滚动条</p><p>方法二，设置滚动条宽度为0，兼容性没有方法一好</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">::</span><span style="color:#C792EA;">-webkit-scrollbar</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h3 id="滚动条不影响页面宽度" tabindex="-1">滚动条不影响页面宽度 <a class="header-anchor" href="#滚动条不影响页面宽度" aria-hidden="true">#</a></h3><p>滚动条的显示和隐藏会改变页面宽度，切换频繁的情况下体验较差，使用以下css</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">overflow:overlay; </span></span>
<span class="line"></span></code></pre></div><h2 id="鼠标选中文本颜色" tabindex="-1">鼠标选中文本颜色 <a class="header-anchor" href="#鼠标选中文本颜色" aria-hidden="true">#</a></h2><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">::</span><span style="color:#C792EA;">selection</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">background</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">3eaf7c</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">  </span><span style="color:#676E95;font-style:italic;">/*选中背景色 */</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">ffffff</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">  </span><span style="color:#676E95;font-style:italic;">/* 选中文字颜色 */</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h2 id="定位垂直居中" tabindex="-1">定位垂直居中 <a class="header-anchor" href="#定位垂直居中" aria-hidden="true">#</a></h2><h3 id="定位属性方法一" tabindex="-1">定位属性方法一 <a class="header-anchor" href="#定位属性方法一" aria-hidden="true">#</a></h3><p>子绝父相，设置子元素top，left, right, bottom 都为0，margin: auto;</p><p>注意此类定位属性只对添加了position属性且值为非static的元素生效</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">father</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> relative</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">       </span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">200px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">200px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">background-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> red</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">son</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> absolute</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">       </span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">top</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">                   </span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">left</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">                 </span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">right</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">                 </span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">bottom</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">                </span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">margin</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> auto</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">             </span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">150px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">150px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">background-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> pink</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h3 id="定位属性方法二" tabindex="-1">定位属性方法二 <a class="header-anchor" href="#定位属性方法二" aria-hidden="true">#</a></h3><p>子绝父相，top，left,都为50%；transform: translateX(-50%) translateY(-50%);</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">father</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> relative</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">200px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">200px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">background-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> red</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">son</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> absolute</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">top</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">50%</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">left</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">50%</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">150px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">150px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">transform</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">translateX</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">-50%</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">translateY</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">-50%</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">background-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> pink</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h3 id="行内元素" tabindex="-1">行内元素 <a class="header-anchor" href="#行内元素" aria-hidden="true">#</a></h3><p>设置 line-height值等于父元素宽度</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">father</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">200px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">200px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">line-height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">200px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">background-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> red</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">text-align</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> center</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">son</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">padding</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10px</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">display</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> inline</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">background-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> pink</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h2 id="background" tabindex="-1">background <a class="header-anchor" href="#background" aria-hidden="true">#</a></h2><p>缩写 注意！缩写时使用background-size属性，则前面必须有/间隔符号，且必须设置background-position属性</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">background:</span><span style="color:#89DDFF;">#</span><span style="color:#F78C6C;">fff</span><span style="color:#A6ACCD;"> url(hero</span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">jpg</span><span style="color:#A6ACCD;">) </span><span style="color:#FFCB6B;">no-repeat</span><span style="color:#A6ACCD;"> top right/cover;</span></span>
<span class="line"></span></code></pre></div><p>全写</p><p>默认 background-position: 0% 0%;</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#FFCB6B;">background-color</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">fff;</span></span>
<span class="line"><span style="color:#FFCB6B;">background-image</span><span style="color:#A6ACCD;">: url(hero</span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">jpg</span><span style="color:#A6ACCD;">);</span></span>
<span class="line"><span style="color:#FFCB6B;">background-repeat</span><span style="color:#A6ACCD;">: </span><span style="color:#FFCB6B;">no-repeat</span><span style="color:#A6ACCD;">;</span></span>
<span class="line"><span style="color:#FFCB6B;">background-position</span><span style="color:#A6ACCD;">: top right;</span></span>
<span class="line"><span style="color:#FFCB6B;">background-size</span><span style="color:#A6ACCD;">: cover;</span></span>
<span class="line"></span></code></pre></div><h2 id="border" tabindex="-1">border <a class="header-anchor" href="#border" aria-hidden="true">#</a></h2><h3 id="设置四个角的border-radius" tabindex="-1">设置四个角的border-radius <a class="header-anchor" href="#设置四个角的border-radius" aria-hidden="true">#</a></h3><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#FFCB6B;">border-top-left-radius</span><span style="color:#A6ACCD;">: 20px;</span></span>
<span class="line"><span style="color:#FFCB6B;">border-top-right-radius</span><span style="color:#A6ACCD;">: 20px;</span></span>
<span class="line"><span style="color:#FFCB6B;">border-bottom-left-radius</span><span style="color:#A6ACCD;">: 20px;</span></span>
<span class="line"><span style="color:#FFCB6B;">border-bottom-right-radius</span><span style="color:#A6ACCD;">: 20px;</span></span>
<span class="line"><span style="color:#A6ACCD;">border: 2px solid </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">999999;</span></span>
<span class="line"></span></code></pre></div><h3 id="不同间距的border线" tabindex="-1">不同间距的border线 <a class="header-anchor" href="#不同间距的border线" aria-hidden="true">#</a></h3><p>使用background-image模拟border</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">width: 100%;</span></span>
<span class="line"><span style="color:#A6ACCD;">height: 10px;</span></span>
<span class="line"><span style="color:#FFCB6B;">background-image</span><span style="color:#A6ACCD;">: linear-gradient(</span></span>
<span class="line"><span style="color:#A6ACCD;">  to right</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">#</span><span style="color:#F78C6C;">ccc</span><span style="color:#A6ACCD;"> 0%</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">#</span><span style="color:#F78C6C;">ccc</span><span style="color:#A6ACCD;"> 50%</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  transparent 50%</span></span>
<span class="line"><span style="color:#A6ACCD;">);</span></span>
<span class="line"><span style="color:#FFCB6B;">background-size</span><span style="color:#A6ACCD;">: 18px 1px;</span></span>
<span class="line"><span style="color:#FFCB6B;">background-repeat</span><span style="color:#A6ACCD;">: </span><span style="color:#FFCB6B;">repeat-x</span><span style="color:#A6ACCD;">;</span></span>
<span class="line"></span></code></pre></div><h3 id="设置border导致字体缩进" tabindex="-1">设置border导致字体缩进 <a class="header-anchor" href="#设置border导致字体缩进" aria-hidden="true">#</a></h3><div class="language-js"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">text</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">indent</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">20px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre></div><h2 id="css选择器" tabindex="-1">css选择器 <a class="header-anchor" href="#css选择器" aria-hidden="true">#</a></h2><h3 id="css奇偶选择" tabindex="-1">css奇偶选择 <a class="header-anchor" href="#css奇偶选择" aria-hidden="true">#</a></h3><p>2n匹配0，2，4，6...，其中0匹配不到，所以也有严谨的写法为2n+2，即从2开始匹配</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">/* 奇数 */</span></span>
<span class="line"><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">nth-child</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">odd</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">nth-child</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">2n+1</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">/* 偶数 */</span></span>
<span class="line"><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">nth-child</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">even</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">nth-child</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">2n</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">nth-child</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">2n+2</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h3 id="css倍数选择" tabindex="-1">css倍数选择 <a class="header-anchor" href="#css倍数选择" aria-hidden="true">#</a></h3><p>3n匹配0，3，6，9...，其中0匹配不到，所以也有严谨的写法为3n+3，即从3开始匹配</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">nth-child</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">3n</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">nth-child</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">3n+3</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h3 id="first-child" tabindex="-1">first-child <a class="header-anchor" href="#first-child" aria-hidden="true">#</a></h3><p>有时候使用了:first-child后却发现没有效果，其实是因为用错了:first-child</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">&lt;</span><span style="color:#FFCB6B;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    &lt;</span><span style="color:#FFCB6B;">h2</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">我是一个h2&lt;/</span><span style="color:#FFCB6B;">h2</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    &lt;</span><span style="color:#FFCB6B;">p</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">我是一个p&lt;/</span><span style="color:#FFCB6B;">p</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">&lt;/</span><span style="color:#FFCB6B;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">&lt;</span><span style="color:#FFCB6B;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">   </span><span style="color:#FFCB6B;">p</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">first-child</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">     </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:#</span><span style="color:#A6ACCD;">f00</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">&lt;/</span><span style="color:#FFCB6B;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div><p>会发现，p元素样式无效，这是因为div的第一个子元素不是p标签，而是h2标签，因此这种情况下其实是为选中到p标签的，应该使用first-of-type</p><p>first-of-type表示一组兄弟元素中其类型的第一个元素</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">&lt;</span><span style="color:#FFCB6B;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">/* 选择在父元素中第一个出现的&lt;p&gt;，而不管其在兄弟内的位置如何 */</span></span>
<span class="line"><span style="color:#A6ACCD;">   </span><span style="color:#FFCB6B;">p</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">first-of-type</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">     </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:#</span><span style="color:#A6ACCD;">f00</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">&lt;/</span><span style="color:#FFCB6B;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div><h2 id="calc" tabindex="-1">calc <a class="header-anchor" href="#calc" aria-hidden="true">#</a></h2><p>css计算属性，可以通过计算设置高度</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">height: calc(100vh - 80px);</span></span>
<span class="line"></span></code></pre></div><h2 id="border-box" tabindex="-1">border-box <a class="header-anchor" href="#border-box" aria-hidden="true">#</a></h2><p>padding不影响盒子宽高，作为width和height一起计算</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#FFCB6B;">box-sizing</span><span style="color:#A6ACCD;">:</span><span style="color:#FFCB6B;">border-box</span><span style="color:#A6ACCD;">;</span></span>
<span class="line"></span></code></pre></div><h2 id="vw，vh和" tabindex="-1">vw，vh和% <a class="header-anchor" href="#vw，vh和" aria-hidden="true">#</a></h2><p>vw和vh是直接相对于可视窗口</p><p>%是相对于父元素</p><h2 id="root" tabindex="-1">:root <a class="header-anchor" href="#root" aria-hidden="true">#</a></h2><p>:root 表示一个HTML文档的根（顶级元素），所以它也被称为根元素，可以在根元素中定义变量，再在其他元素中使用</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">root</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  --foo</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">7F583F</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  --bar</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">F7EFD2</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#FFCB6B;">a</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">var</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">--foo</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">text-decoration-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">var</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">--bar</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h2 id="text-decoration" tabindex="-1">text-decoration <a class="header-anchor" href="#text-decoration" aria-hidden="true">#</a></h2><p>可以设置文本中一条线的位置，可以去除a标签下划线</p><div class="language-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">text/css</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#FFCB6B;">h1</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#B2CCD6;">text-decoration</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> overline</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#FFCB6B;">h2</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#B2CCD6;">text-decoration</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> line-through</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#FFCB6B;">h3</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#B2CCD6;">text-decoration</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> underline</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#FFCB6B;">h4</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#B2CCD6;">text-decoration</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">blink</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#FFCB6B;">a</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#B2CCD6;">text-decoration</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> none</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">这是标题 1</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">h2</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">这是标题 2</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">h2</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">h3</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">这是标题 3</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">h3</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">h4</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">这是标题 4</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">h4</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;">&gt;&lt;</span><span style="color:#F07178;">a</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">href</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">http://www.w3school.com.cn/index.html</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">这是一个链接</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">a</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div><h2 id="好看的box-shadow" tabindex="-1">好看的box-shadow <a class="header-anchor" href="#好看的box-shadow" aria-hidden="true">#</a></h2><p>box-shadow参考网站</p><p><a href="https://getcssscan.com/css-box-shadow-examples" target="_blank" rel="noopener noreferrer">https://getcssscan.com/css-box-shadow-examples</a></p><h2 id="浏览器兼容前缀" tabindex="-1">浏览器兼容前缀 <a class="header-anchor" href="#浏览器兼容前缀" aria-hidden="true">#</a></h2><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#FFCB6B;">i</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">hover</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#FFCB6B;">-webkit-transform</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">rotate</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">540deg</span><span style="color:#89DDFF;">);</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">/* Safari / Chrome */</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#FFCB6B;">-moz-transform</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">rotate</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">540deg</span><span style="color:#89DDFF;">);</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">/* Firefox */</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#FFCB6B;">-o-transform</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">rotate</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">540deg</span><span style="color:#89DDFF;">);</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">/* Opera */</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#FFCB6B;">-ms-transform</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">rotate</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">540deg</span><span style="color:#89DDFF;">);</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">/* IE */</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">transform</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">rotate</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">540deg</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h2 id="箭头绘制" tabindex="-1">箭头绘制 <a class="header-anchor" href="#箭头绘制" aria-hidden="true">#</a></h2><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#FFCB6B;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">border</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> solid black</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">border-width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1px</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1px</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">display</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> inline-block</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">padding</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">right</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">transform</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">rotate</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">-45deg</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#FFCB6B;">-webkit-transform</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">rotate</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">-45deg</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">left</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">transform</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">rotate</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">135deg</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#FFCB6B;">-webkit-transform</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">rotate</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">135deg</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">up</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">transform</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">rotate</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">-135deg</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#FFCB6B;">-webkit-transform</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">rotate</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">-135deg</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">down</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">transform</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">rotate</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">45deg</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#FFCB6B;">-webkit-transform</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">rotate</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">45deg</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h2 id="pointer-events-none" tabindex="-1">pointer-events: none <a class="header-anchor" href="#pointer-events-none" aria-hidden="true">#</a></h2><p>pointer-events: none 顾名思义，就是鼠<strong>标事件拜拜的</strong>意思。 元素应用了该 CSS 属性，链接啊，点击事件啥的都变成了 “浮云”。 pointer-events: none 的作用是让元素实体 “虚化”。 例如一个应用 pointer-events: none 的按钮元素，则我们在页面上看到的这个按钮，只是一个虚幻的影子而已，您可以理解为海市蜃楼，幽灵的躯体。 当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去</p><h2 id="margin-padding" tabindex="-1">margin/padding <a class="header-anchor" href="#margin-padding" aria-hidden="true">#</a></h2><ul><li>属性值为4个时，对应 上 右 下 左</li><li>属性值为3个时，对应 上 左右 下</li><li>属性值为2个时，对应 上下 左右</li><li>属性值为1个时，对应 上右下左</li></ul><h2 id="table" tabindex="-1">table <a class="header-anchor" href="#table" aria-hidden="true">#</a></h2><p>为表格设置合并边框模型：</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#FFCB6B;">table</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">border-collapse</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> collapse</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><p>如果thead和tbody数量不一致,表格的右下角会出现黑线,这是表格border的默认颜色</p><p>这时可以设置table的border颜色和表格td一致即可,示例:</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#FFCB6B;">table</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">border-collapse</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> collapse</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">border</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1px</span><span style="color:#A6ACCD;"> solid </span><span style="color:#82AAFF;">rgba</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">220</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">229</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">243</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#FFCB6B;">td</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">   </span><span style="color:#B2CCD6;">border</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1px</span><span style="color:#A6ACCD;"> solid </span><span style="color:#82AAFF;">rgba</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">220</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">229</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">243</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">                                           </span></span>
<span class="line"></span></code></pre></div><h2 id="input" tabindex="-1">input <a class="header-anchor" href="#input" aria-hidden="true">#</a></h2><h3 id="清除默认样式" tabindex="-1">清除默认样式 <a class="header-anchor" href="#清除默认样式" aria-hidden="true">#</a></h3><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#FFCB6B;">input</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">border</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> none</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">outline</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> none</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">background-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> transparent</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">000000</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">244px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h3 id="placeholder字体颜色" tabindex="-1">placeholder字体颜色 <a class="header-anchor" href="#placeholder字体颜色" aria-hidden="true">#</a></h3><p>input::placeholder</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#FFCB6B;">input</span><span style="color:#89DDFF;">::</span><span style="color:#C792EA;">placeholder</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">007a9f</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h3 id="checkbox样式" tabindex="-1">checkbox样式 <a class="header-anchor" href="#checkbox样式" aria-hidden="true">#</a></h3><p>不能直接使用css，而是使用after遮住原先的checkbox，给after设置样式</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">input</span><span style="color:#89DDFF;">[</span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">checkbox</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">]</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">cursor</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> pointer</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> relative</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">20px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">20px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">margin</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2.5px</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">20px</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0px</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">font-size</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">14px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#FFCB6B;">input</span><span style="color:#89DDFF;">[</span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">checkbox</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">]::</span><span style="color:#C792EA;">after</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#FFCB6B;">input</span><span style="color:#89DDFF;">[</span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">checkbox</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">]:</span><span style="color:#C792EA;">checked</span><span style="color:#89DDFF;">::</span><span style="color:#C792EA;">after</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">content</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> absolute</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">top</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">-2.5px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">25px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">25px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">border</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1px</span><span style="color:#A6ACCD;"> solid </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">009cc3</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">border-radius</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">7px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">background-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">004557</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#FFCB6B;">input</span><span style="color:#89DDFF;">[</span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">checkbox</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">]:</span><span style="color:#C792EA;">checked</span><span style="color:#89DDFF;">::</span><span style="color:#C792EA;">after</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">content</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">✓</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">ffffff</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">display</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> flex</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">align-items</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> center</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">justify-content</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> center</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h3 id="input-type样式" tabindex="-1">input type样式 <a class="header-anchor" href="#input-type样式" aria-hidden="true">#</a></h3><div class="language-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">file-upload</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">file-upload-text</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Upload 上传</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">input</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">upfile</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">file-upload-input</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">upfile</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">file</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">accept</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">image/*</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">    &lt;</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">file-upload</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">40px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">line-height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">40px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> relative</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">overflow</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> hidden</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">border</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1px</span><span style="color:#A6ACCD;"> solid </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">0f996b</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">border-radius</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">4px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">font-size</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">16px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">0f996b</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">text-align</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> center</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">file-upload-input</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> absolute</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">top</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">right</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">cursor</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> pointer</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">300%</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">300%</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div><h3 id="input-type-number上下箭头" tabindex="-1">input type=number上下箭头 <a class="header-anchor" href="#input-type-number上下箭头" aria-hidden="true">#</a></h3><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#FFCB6B;">input</span><span style="color:#89DDFF;">::</span><span style="color:#C792EA;">-webkit-outer-spin-button</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#FFCB6B;">input</span><span style="color:#89DDFF;">::</span><span style="color:#C792EA;">-webkit-inner-spin-button</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#FFCB6B;">-webkit-appearance</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> none</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#FFCB6B;">input</span><span style="color:#89DDFF;">[</span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">number</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">]{</span></span>
<span class="line"><span style="color:#A6ACCD;">   </span><span style="color:#FFCB6B;">-moz-appearance</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> textfield</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h2 id="transform" tabindex="-1">transform <a class="header-anchor" href="#transform" aria-hidden="true">#</a></h2><ul><li>translate（平移）</li><li>skew（倾斜）</li><li>rotate（旋转）</li><li>scale（缩放）</li><li>matrix（矩阵操作，可涵盖前四者，威力十分强大）</li></ul><h3 id="matrix" tabindex="-1">matrix <a class="header-anchor" href="#matrix" aria-hidden="true">#</a></h3><p>CSS函数 <code>matrix()</code> 指定了一个由指定的 6 个值组成的 2D 变换矩阵。这种矩阵的常量值是隐含的，而不是由参数传递的；其他的参数是以列优先的顺序描述的。</p><ul><li><p>参数1 缩放比例</p></li><li><p>参数2 z轴</p></li><li><p>参数3 z轴</p></li><li><p>参数4 z轴</p></li><li><p>参数5 x轴位置</p></li><li><p>参数6 y轴位置</p></li></ul><p>这些值表示以下函数:matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )</p><div class="language-js"><span class="copy"></span><pre><code><span class="line"><span style="color:#FFCB6B;">transform</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">matrix</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">0.46</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0.56</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">468.391</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">424.111</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span></code></pre></div><h2 id="表格" tabindex="-1">表格 <a class="header-anchor" href="#表格" aria-hidden="true">#</a></h2><h3 id="设置表格宽高合并" tabindex="-1">设置表格宽高合并 <a class="header-anchor" href="#设置表格宽高合并" aria-hidden="true">#</a></h3><p>colspan和rowspan</p><h3 id="表格不能设置宽度无效" tabindex="-1">表格不能设置宽度无效 <a class="header-anchor" href="#表格不能设置宽度无效" aria-hidden="true">#</a></h3><table><thead><tr><th>值</th><th>描述</th></tr></thead><tbody><tr><td>automatic</td><td>默认。列宽度由单元格内容设定。</td></tr><tr><td>fixed</td><td>列宽由表格宽度和列宽度设定。</td></tr><tr><td>inherit</td><td>规定应该从父元素继承 table-layout 属性的值。</td></tr></tbody></table><p>为table加入以下css</p><div class="language-css"><span class="copy"></span><pre><code><span class="line"><span style="color:#FFCB6B;">table-layout</span><span style="color:#A6ACCD;">:fixed</span></span>
<span class="line"></span></code></pre></div><h3 id="table-layout-fixed无效" tabindex="-1">table-layout:fixed无效 <a class="header-anchor" href="#table-layout-fixed无效" aria-hidden="true">#</a></h3><p>th或td设置colspan后table-layout:fixed无效</p><h2 id="回流（reflow）与重绘（repaints）" tabindex="-1">回流（reflow）与重绘（repaints） <a class="header-anchor" href="#回流（reflow）与重绘（repaints）" aria-hidden="true">#</a></h2><p>重绘（repaints）是一个元素外观的改变所触发的浏览器行为，例如改变vidibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，并不一定伴随回流</p><p>回流（reflow）是更明显的一种改变，可以理解为渲染树需要重新计算</p><h3 id="css中的定位、隐藏" tabindex="-1">CSS中的定位、隐藏 <a class="header-anchor" href="#css中的定位、隐藏" aria-hidden="true">#</a></h3><p>回流的危害在于重新对DOM树进行渲染，而脱离文档流之后，进行的任何操作，都不会造成回流！如果有需要经常进行复杂操作的地方，不妨使用position：absolute/fixed定位；或者是display：none，使之脱离文档流后进行操作，操作完成后再进入到文档流之中</p><h3 id="css中的顽固属性" tabindex="-1">CSS中的顽固属性 <a class="header-anchor" href="#css中的顽固属性" aria-hidden="true">#</a></h3><p>以下这些属性，只要是改动了他们的值，就会造成回流，建议将他们合并到一起操作，可以减少回流的次数。这些属性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight；scrollTop、scrollLeft、scrollWidth、scrollHeight；clientTop、clientLeft、clientWidth、clientHeight；getComputedStyle() 、currentStyle（）</p><h2 id="脱离文档流" tabindex="-1">脱离文档流 <a class="header-anchor" href="#脱离文档流" aria-hidden="true">#</a></h2><p>指的是<strong>元素脱离正常元素的布局排版规则</strong>,其他处于文档流中的盒子在计算布局排版时,会自动无视已脱离文档流的元素来进行定位</p><p>元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。</p><p>脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。</p><h3 id="怎么脱离文档流" tabindex="-1">怎么脱离文档流 <a class="header-anchor" href="#怎么脱离文档流" aria-hidden="true">#</a></h3><ul><li>float</li><li>absolute</li><li>fixed</li></ul><h2 id="css高度随宽度变化" tabindex="-1">css高度随宽度变化 <a class="header-anchor" href="#css高度随宽度变化" aria-hidden="true">#</a></h2><p><a href="https://m.qy.cn/jszx/detail/5262.html" target="_blank" rel="noopener noreferrer">https://m.qy.cn/jszx/detail/5262.html</a></p></div></div><!----></main><!--[--><!--]--><footer class="VPContentDocFooter" data-v-6971fa12 data-v-716919ab><a class="prev-link" href="/vite-vue-blog/notes/2.basic/1.html/1.%E5%9F%BA%E7%A1%80.html" data-v-716919ab><span class="desc" data-v-716919ab><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-link-icon" data-v-716919ab><path d="M15,19c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4l6-6c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4L10.4,12l5.3,5.3c0.4,0.4,0.4,1,0,1.4C15.5,18.9,15.3,19,15,19z"></path></svg> 上一节</span><span class="title" data-v-716919ab>基础</span></a><a class="next-link" href="/vite-vue-blog/notes/2.basic/2.css/2.flex.html" data-v-716919ab><span class="desc" data-v-716919ab>下一节 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-link-icon" data-v-716919ab><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></span><span class="title" data-v-716919ab>flex</span></a></footer></div></div></div></div><div class="visually-hidden" aria-live="polite" data-v-73d720b3>基础属性 has loaded</div></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"index.md\":\"a7119076\",\"notes_1.javascript_typescript_1.介绍与安装.md\":\"bd6528cc\",\"notes_1.javascript_typescript_2.基础语法.md\":\"2b48285d\",\"notes_1.javascript_typescript_3.进阶语法.md\":\"9fc200ea\",\"notes_1.javascript_typescript_4.综合示例.md\":\"b2cca1bb\",\"notes_1.javascript_typescript_6.type-challenges.md\":\"ad1ea441\",\"notes_1.javascript_typescript_7.doc注释法.md\":\"6da3a8f5\",\"notes_1.javascript_typescript_8.tsconfig.md\":\"3a9cad49\",\"notes_1.javascript_基础_1.基础语法.md\":\"53042640\",\"notes_1.javascript_基础_10.call-apply-bind.md\":\"8b5b4d53\",\"notes_1.javascript_基础_12.date.md\":\"8bbc9e82\",\"notes_1.javascript_基础_14.正则表达式.md\":\"dad2455a\",\"notes_1.javascript_基础_15.promise.md\":\"523683bd\",\"notes_1.javascript_基础_2.string.md\":\"9ef7d4a4\",\"notes_1.javascript_基础_20.ajax.md\":\"3c505745\",\"notes_1.javascript_基础_3.number.md\":\"673ae25b\",\"notes_1.javascript_基础_4.object.md\":\"c3c2d806\",\"notes_1.javascript_基础_5.array.md\":\"8341e3ea\",\"notes_1.javascript_基础_6.canvas.md\":\"5b3d57a6\",\"notes_1.javascript_基础_es6.md\":\"a11b1af7\",\"notes_1.javascript_基础_settimeout.md\":\"3a278b83\",\"notes_1.javascript_基础_事件委托.md\":\"fa7b0a71\",\"notes_1.javascript_基础_事件循环.md\":\"043fd67b\",\"notes_1.javascript_基础_原型与原型链.md\":\"85f423d2\",\"notes_1.javascript_基础_原型链探究.md\":\"7ab3569c\",\"notes_1.javascript_基础_大文件上传分片.md\":\"e732af31\",\"notes_1.javascript_基础_懒加载和虚拟滚动.md\":\"6ff4061a\",\"notes_1.javascript_基础_文件二进制.md\":\"0b60ff5e\",\"notes_1.javascript_基础_深浅拷贝.md\":\"1d99a497\",\"notes_1.javascript_基础_闭包.md\":\"4d9e0010\",\"notes_1.javascript_基础_防抖与节流.md\":\"ac94b2d6\",\"notes_1.javascript_工具函数_10.工具函数.md\":\"8ff9a8d5\",\"notes_1.javascript_工具函数_16.滚动.md\":\"3343e4be\",\"notes_1.javascript_工具函数_svg.md\":\"8296350c\",\"notes_2.basic_1.html_1.基础.md\":\"dcdaee52\",\"notes_2.basic_2.css_1.基础.md\":\"7ace2c5c\",\"notes_2.basic_2.css_2.flex.md\":\"c69977d3\",\"notes_2.basic_2.css_3.less.md\":\"a501b0d7\",\"notes_2.basic_2.css_4.scss.md\":\"7f9633f1\",\"notes_2.basic_2.css_5.响应式.md\":\"036701f5\",\"notes_2.basic_2.css_6.主题切换.md\":\"0c4e4dd0\",\"notes_2.basic_2.css_7.动画.md\":\"fd4bc61e\",\"notes_2.basic_2.css_8.grid.md\":\"bdc8b7ae\",\"notes_2.basic_5.node_1.起步.md\":\"e7e277ef\",\"notes_2.basic_5.node_4.环境变量设置.md\":\"a03a948a\",\"notes_2.basic_5.node_npm.md\":\"211fbec4\",\"notes_2.basic_5.node_nvm.md\":\"e3486de6\",\"notes_2.basic_5.node_package.json.md\":\"d9e9c604\",\"notes_2.basic_5.node_pnpm.md\":\"bc13810e\",\"notes_2.basic_5.node_yarn.md\":\"56fb8e96\",\"notes_2.basic_5.node_脚本开发.md\":\"b2f2b588\",\"notes_2.basic_6.http_2.http.md\":\"07ef7cc3\",\"notes_2.basic_6.http_untitled.md\":\"0bf853ff\",\"notes_2.basic_7.git_github.md\":\"4a8e9177\",\"notes_2.basic_7.git_vim编辑器.md\":\"7feb6977\",\"notes_2.basic_7.git_分支操作.md\":\"eca5274c\",\"notes_2.basic_7.git_基础.md\":\"13f2197d\",\"notes_2.basic_7.git_子模块.md\":\"4d22ac99\",\"notes_2.basic_7.git_拉取代码.md\":\"1ddaa4e1\",\"notes_2.basic_7.git_提交代码.md\":\"60f0513e\",\"notes_2.basic_7.git_问题整理.md\":\"5ee1ccd8\",\"notes_2.basic_8.java_1.起步.md\":\"cd36d569\",\"notes_2.basic_8.java_3.基础语法.md\":\"b06281a7\",\"notes_2.basic_8.java_4.javaweb.md\":\"ae639163\",\"notes_2.basic_8.java_5.mysql.md\":\"c0605455\",\"notes_2.basic_8.java_6.服务器.md\":\"1fdae0b4\",\"notes_2.basic_9.算法_1.基础.md\":\"fa3f4620\",\"notes_2.basic_9.算法_5.leecode.md\":\"5836668f\",\"notes_3.framework_10.react_1.项目创建与配置.md\":\"a13b8d18\",\"notes_3.framework_10.react_2.语法.md\":\"945be494\",\"notes_3.framework_10.react_3.react-router.md\":\"89475651\",\"notes_3.framework_10.react_4.hooks.md\":\"93d27fd6\",\"notes_3.framework_3.express_1.起步.md\":\"582569a2\",\"notes_3.framework_3.express_2.express方法.md\":\"297b2f45\",\"notes_3.framework_3.express_3.jwt.md\":\"e5f91a6a\",\"notes_3.framework_3.express_4.mysql.md\":\"4f576728\",\"notes_3.framework_3.vue_12.vitepress.md\":\"03a09f4d\",\"notes_3.framework_3.vue_13.vue-router.md\":\"64d860a1\",\"notes_3.framework_3.vue_14.vuetify.md\":\"b8c63df7\",\"notes_3.framework_3.vue_15.源码阅读.md\":\"3b7203db\",\"notes_3.framework_3.vue_16.vite插件开发.md\":\"592c82ee\",\"notes_3.framework_3.vue_18.vueuse.md\":\"7292fe8e\",\"notes_3.framework_3.vue_2.vite.md\":\"66d9c036\",\"notes_3.framework_3.vue_3.基础.md\":\"189184b0\",\"notes_3.framework_3.vue_4.vue2.md\":\"6bd4d84f\",\"notes_3.framework_3.vue_5.vue3.md\":\"da43c351\",\"notes_3.framework_3.vue_6.pinna.md\":\"431f4d88\",\"notes_3.framework_3.vue_7.待整理笔记.md\":\"b5cb4a1d\",\"notes_3.framework_3.vue_8.功能实现.md\":\"deed1460\",\"notes_3.framework_4.uniapp_1.创建项目.md\":\"76affd27\",\"notes_3.framework_4.uniapp_3.实例.md\":\"c5d614e0\",\"notes_3.framework_4.uniapp_4.unicloud.md\":\"2a35fe9c\",\"notes_3.framework_4.uniapp_6.sqlite.md\":\"36191099\",\"notes_3.framework_4.uniapp_hbuilderx插件.md\":\"4bec2ec3\",\"notes_3.framework_4.uniapp_app端文件操作.md\":\"95db967d\",\"notes_3.framework_4.uniapp_nvue.md\":\"625f242d\",\"notes_3.framework_4.uniapp_功能实现.md\":\"0d913121\",\"notes_3.framework_4.uniapp_图片操作.md\":\"1d8b7462\",\"notes_3.framework_4.uniapp_基础知识.md\":\"70124264\",\"notes_3.framework_4.uniapp_小程序.md\":\"0d38f31a\",\"notes_3.framework_4.uniapp_文件操作.md\":\"e86ee38f\",\"notes_3.framework_4.uniapp_滚动.md\":\"97780f32\",\"notes_3.framework_5.electron_1.起步.md\":\"1fa8d3e9\",\"notes_3.framework_5.electron_2.vite-electron.md\":\"30b0f6fe\",\"notes_3.framework_5.electron_2.开始.md\":\"f25811cd\",\"notes_3.framework_5.electron_4.语法.md\":\"cd7644d7\",\"notes_3.framework_5.electron_5.electron打包vue.md\":\"07404ad8\",\"notes_3.framework_5.electron_6.进程通信.md\":\"172975e9\",\"notes_3.framework_5.electron_7.黑夜模式.md\":\"0acdd76f\",\"notes_3.framework_5.electron_8.browserwindow.md\":\"79092934\",\"notes_3.framework_6.微信小程序_1.创建项目.md\":\"43e386d1\",\"notes_3.framework_7.乾坤_1.前置知识.md\":\"87448ab1\",\"notes_3.framework_7.乾坤_2.实战.md\":\"ba1ae36b\",\"notes_3.framework_7.乾坤_3.部署上线.md\":\"3b3e834c\",\"notes_3.framework_7.乾坤_4.源码阅读.md\":\"c21a2e17\",\"notes_3.framework_koa_redis.md\":\"bba89871\",\"notes_3.framework_koa_中间件.md\":\"2ca1c619\",\"notes_3.framework_koa_基础.md\":\"374c2d17\",\"notes_4.library_autoprefixer_1.基础.md\":\"a15e218d\",\"notes_4.library_monaco-editor_monaco-editor.md\":\"57b75b84\",\"notes_4.library_eharts_1.vue中使用.md\":\"cdde4646\",\"notes_4.library_eharts_2.react中使用.md\":\"2579c725\",\"notes_4.library_eharts_3.通用.md\":\"cb7119c9\",\"notes_4.library_eharts_4.饼图.md\":\"4e8e47e2\",\"notes_4.library_eharts_5.柱状图.md\":\"70d08ba6\",\"notes_4.library_eharts_6.折线图.md\":\"ae2e9342\",\"notes_4.library_eharts_7.tooltip.md\":\"114afe2d\",\"notes_4.library_eharts_8.地图.md\":\"8696e214\",\"notes_4.library_logic-flow_1.起步.md\":\"f29527ec\",\"notes_4.library_logic-flow_3.用法.md\":\"d74d70e6\",\"notes_4.library_node包_cheerio.md\":\"c589ee05\",\"notes_4.library_node包_docsify.md\":\"784484ef\",\"notes_4.library_node包_npm-check.md\":\"1ce5454f\",\"notes_4.library_node包_npm-run-all.md\":\"91276b49\",\"notes_4.library_node包_tsup.md\":\"9cf1bf37\",\"notes_4.library_node包_脚本.md\":\"b58b5982\",\"notes_4.library_xlsx_1.文档翻译.md\":\"12943aa2\",\"notes_4.library_xlsx_2.学习xlsx.md\":\"e5e24bbb\",\"notes_4.library_待整理_axios.md\":\"5a7641af\",\"notes_4.library_待整理_dayjs.md\":\"7e7716a5\",\"notes_4.library_待整理_prettier.md\":\"d7bd12d2\",\"notes_4.library_待整理_vxe-table.md\":\"ed1fef55\",\"notes_5.build_1.webpack_1.起步.md\":\"8dd80bd5\",\"notes_5.build_1.webpack_2.loader.md\":\"ec110bce\",\"notes_5.build_1.webpack_3.vue脚手架.md\":\"ffb3d85e\",\"notes_5.build_1.webpack_4.进阶.md\":\"05b3507c\",\"notes_5.build_2.rollup_1.介绍.md\":\"70b92034\",\"notes_5.build_2.rollup_1.起步.md\":\"2c4acac4\",\"notes_5.build_2.rollup_4.打包格式.md\":\"cce455ff\",\"notes_5.build_2.rollup_5.常用插件.md\":\"d9ca29f7\",\"notes_5.build_2.rollup_6.插件开发.md\":\"a8a79b98\",\"notes_5.build_3.babel_3.babel.md\":\"c919cbf8\",\"notes_5.build_4.server_4.上线.md\":\"d50d068a\",\"notes_6.all_3.just-start_2.mongodb.md\":\"a068a2e5\",\"notes_6.all_3.just-start_3.移动端.md\":\"fd479c00\",\"notes_6.all_3.just-start_5.脚本.md\":\"b0c9f691\",\"notes_6.all_4.solve-problems_postmon.md\":\"844774bd\",\"notes_6.all_4.solve-problems_ps.md\":\"bdc89237\",\"notes_6.all_4.solve-problems_typora.md\":\"b10b94a2\",\"notes_6.all_4.solve-problems_uniapp.md\":\"4fd2f730\",\"notes_6.all_4.solve-problems_windows10.md\":\"b2413012\",\"notes_6.all_4.solve-problems_开发.md\":\"104171f2\",\"notes_6.all_4.solve-problems_浏览器.md\":\"af324a8b\",\"notes_6.all_4.solve-problems_论文查重.md\":\"c3cec84e\",\"notes_6.all_4.vscode_1.vscode使用.md\":\"ac6e101a\",\"notes_6.all_4.vscode_1.插件开发流程.md\":\"c7250214\",\"notes_6.all_4.vscode_1.概括.md\":\"1d9fd058\",\"notes_6.all_4.vscode_2.commands.md\":\"17839438\",\"notes_6.all_4.vscode_2.languages.md\":\"ad36adc9\",\"notes_6.all_4.vscode_2.vscode常用插件.md\":\"f856d76a\",\"notes_6.all_4.vscode_2.语法高亮指南.md\":\"022760aa\",\"notes_6.all_4.vscode_4.插件api.md\":\"d2bc7b97\",\"notes_6.all_4.vscode_5.插件开发实例.md\":\"56b1b964\",\"notes_6.all_4.vscode_6.package.json.md\":\"bd15bba9\",\"notes_6.all_english_学习学习.md\":\"8487d588\",\"notes_6.all_snabbdom_1.源码解读.md\":\"86622f05\"}")</script>
    <script type="module" async src="/vite-vue-blog/assets/app.864f9b59.js"></script>
    
  </body>
</html>